<template>
	<view style="padding-bottom: 20rpx;">
		<u-navbar :border-bottom='false' back-icon-size='48' title="补充信息"></u-navbar>
		<view class="tip">
			*请提供您的出行信息，便于我们为您提供接送服务
		</view>
		<view class="tripInfo">
			<view class="lable">
				出行人信息
			</view>
			<view class="trip-peo">
				<view class="trip-ul" :style="{height:ismore?'auto':'240rpx'}">
					<view class="trip-li" v-for="(item,index) in popList" :key="index">
						<u-checkbox v-model="item.checked" shape="circle" :name="item.id" @change="checkboxChange" ></u-checkbox>
						<view class="unChcek">
							<view class="info">
								<view class="name">
                  {{ item.id_name }}
								</view>
								<view class="id">
									身份证 {{ item.id_number }}
								</view>
							</view>
							<view class="edit">
								<u-icon name="edit-pen" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="moreTrip" @click="ismore= !ismore">
					<text style="margin-right: 6rpx;">更多出行人</text>
					<u-icon name="arrow-down" color="#666666" size="28"></u-icon>
				</view>
			</view>

		</view>

		<view class="traffic">
			<view class="lable">
				交通信息
			</view>
			<view class="go">
				<view class="tit">
					去程
				</view>
				<view class="go-li">
					<view class="left">
						交通工具
					</view>
					<view class="right">
						<view class="item" :class="{act: traIndex== 1}" @click="chooseFn(1)">
							火车
						</view>
						<view class="item" :class="{act: traIndex== 3}" @click="chooseFn(3)">
							飞机
						</view>
						<view class="item" :class="{act: traIndex== 4}" @click="chooseFn(4)">
							自驾
						</view>
					</view>
				</view>
				<view class="go-li">
					<view class="left">
						出发时间
					</view>
					<view class="right" @click="show = true">
						<view class="time" >
              {{ datas.start_time }}
						</view>
						<view class="icon">
							<u-icon style="margin-left: auto;" name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="go-li">
					<view class="left">
						到达时间
					</view>
					<view class="right" @click="show = true">
						<view class="time" >
              {{ datas.end_time }}
						</view>
						<view class="icon">
							<u-icon style="margin-left: auto;" name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="go-li">
					<view class="left">
						车次/航班号
					</view>
					<view class="right">
						<input type="text" placeholder="请输入" v-model="datas.s_no"/>
					</view>
				</view>
			</view>
			<view class="back">
				<view class="tit">
					返程
				</view>

				<view class="go-li">
					<view class="left">
						交通工具
					</view>
					<view class="right">
						<view class="item" :class="{act: traIndex== 1}" @click="chooseFn(1)">
							火车
						</view>
						<view class="item" :class="{act: traIndex== 3}" @click="chooseFn(3)">
							飞机
						</view>
						<view class="item" :class="{act: traIndex== 4}" @click="chooseFn(4)">
							自驾
						</view>
					</view>
				</view>

				<view class="go-li">
					<view class="left">
						车次/航班号
					</view>
					<view class="right">
						<input type="text" placeholder="请输入" v-model="datas.e_no"/>
					</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="setDetails">
			保 存
		</view>
    <view>
      <u-calendar v-model="show" :mode="mode" @change="changeTime" :max-date="items.start_time"></u-calendar>
    </view>
	</view>
</template>

<script>
  import oRequest from '@/api/order.js'
	export default {
		data() {
			return {
				traIndex: 1,
				selectPop: [],
				ismore: false,
        id:0,
        items:{},
        popList:[],
        show:false,
        mode:'range',
        datas:{
				  start_time:'',
				  end_time:'',
          s_no:'',
          e_no:''
        }

			}
		},
    onLoad(options){
		  this.id = options.id
    },
    onShow(){
		  this.getDetails()
    },
		methods: {
			chooseFn(index) {
				this.traIndex = index
			},
      async getDetails(){
			  let res = await oRequest.getDetailsOrder({order_id:this.id})
        if(res.status){
          this.items = res.data
          this.popList = res.data.people
          //console.log(this.popList)
          this.popList.forEach(item=>{
            item.checked = true
          })
        }
      },
      setDetails(){
			  const items = this.items
        const datas = this.datas
        const traIndex = this.traIndex
			  if(this.datas.start_time === '' || this.datas.end_time === ''){
          uni.showToast({
                          title: '请完善出行时间和到达时间',
                          icon : 'none'
                        })
          return false
        }
        if(this.traIndex !== 2 && (this.datas.s_no === '' || this.datas.e_no === '')){
          uni.showToast({
                          title: '请完善航班/车次信息',
                          icon : 'none'
                        })
          return false
        }
        //TODO 发起api进行信息补充
        let res = oRequest.setDetailsOrder({
                                   id:items.id,
                                   leaving_travel_type:traIndex,
                                   leaving_train_flight:datas.s_no,
                                   leaving_start_time:datas.start_time,
                                   leaving_end_time:datas.emd_time,
                                   back_travel_type:this.traIndex,
                                   back_train_flight:datas.e_no
                                 })
        //console.log(res)
        uni.showToast({
                        title: '提交完成',
                        //icon:'error'
                      })

      },
      changeTime(e){
        console.log(e)
        this.datas.start_time = e.startDate
        this.datas.end_time = e.endDate
      },
      checkboxChange(e){
        console.log(e)
      }
		},
    watch:{
      selectPop(val){
        console.log(val)

      }
    }
	}
</script>

<style lang="scss" scoped>
	.tip {
		width: 100%;
		height: 88rpx;
		background: #FEF7EF;
		line-height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F48254;
		padding-left: 24rpx;
	}

	.tripInfo {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;

		.lable {
			padding-left: 20rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.trip-peo {
			width: 100%;
			height: auto;

			.moreTrip {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.trip-ul {
			padding: 0 20rpx;
			overflow: hidden;

			.trip-li {
				display: flex;
				align-items: center;
				height: 120rpx;

				.unChcek {
					width: 88%;
					height: 120rpx;
					margin-left: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F2F2F2;

					.info {
						.name {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}

						.id {
							margin-top: 6rpx;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}

					.edit {
						margin-left: auto;
					}
				}
			}
		}
	}

	.traffic {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;

		.lable {
			padding-left: 20rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.go,
		.back {
			padding: 0 20rpx;

			.tit {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 80rpx;
			}

			.go-li {
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;
				border-bottom: 2rpx solid #F2F2F2;

				.left {
					width: 24%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.right {
					width: 76%;
					display: flex;
					align-items: center;

					.item {
						width: 120rpx;
						height: 52rpx;
						background: #FFFFFF;
						border: 2rpx solid #DCDCE0;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 52rpx;
						color: #333333;
						text-align: center;
						margin-right: 40rpx;
					}

					.act {
						background: #FDE7DF;
						border: 2rpx solid #F16026;
					}

					.time {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.icon {
						margin-left: auto;
					}

					input {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}

	.btn {
		margin: 20rpx auto;
		width: 710rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
		border-radius: 16rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	/deep/ .u-checkbox__label {
		margin-right: 0rpx !important;
	}
</style>
